<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/main.css">
    <script>
    function init(){
        let nodes = document.querySelectorAll(".leftMenu_li_level1");
        Array.from(nodes).forEach((item)=>{
            item.addEventListener("click",(event)=>{
                let node = event.target.nextElementSibling;
                if (node.hidden == true) {
                    node.hidden = false;
                }else{
                    node.hidden = true;
                }
            },false);
        });
    }

        window.addEventListener("load",init,false);
    
    </script>
</head>

<body>
    <main>
        <header id="header1">
            <h1>log</h1>
        </header>
        <header id="topMenu">
            <ul class="topMenu_u1">
                <li class="topMenu_li">
                    <nav>
                        <div class="topMenu_img" id="topMenu_index"></div>
                        <a href="#">首页</a>
                    </nav>
                </li>
                <li class="topMenu_li">
                    <nav>
                        <div class="topMenu_img" id="topMenu_write"></div>
                        <a href="#">写文章</a>
                    </nav>
                </li>
                <li class="topMenu_li">
                    <nav>
                        <div class="topMenu_img" id="topMenu_type"></div>
                        <a href="#">文章类型</a>
                    </nav>
                </li>
                <li class="topMenu_li">
                    <nav>
                        <div class="topMenu_img" id="topMenu_config"></div>
                        <a href="#">设置</a>
                    </nav>
                </li>
            </ul>
        </header>
        <nav id="nav">
            <h2 style="text-align: center">文章类型</h2>
            <ul class="leftMenu_ul_level1">
                <li class="leftMenu_li_level1">
                    Java Core
                    <div class="leftMenuImgs"></div>
                </li>
                <ul class="leftMenu_ul_level2" hidden>
                    <li class="leftMenu_li_level2">面向对象</li>
                    <li class="leftMenu_li_level2">多线程</li>
                </ul>
                <li class="leftMenu_li_level1">Java Web
                    <div class="leftMenuImgs">
                </li>
                <ul class="leftMenu_ul_level2" hidden>
                    <li class="leftMenu_li_level2">Servlet3+</li>
                    <li class="leftMenu_li_level2">JSTL/EL</li>
                </ul>
                <li class="leftMenu_li_level1">前端技术
                    <div class="leftMenuImgs">
                </li>
                <ul class="leftMenu_ul_level2" hidden>
                    <li class="leftMenu_li_level2">HTML5</li>
                    <li class="leftMenu_li_level2">CSS3</li>
                    <li class="leftMenu_li_level2">ECMAScript 6</li>
                </ul>
                <li class="leftMenu_li_level1">心灵鸡汤
                    <div class="leftMenuImgs">
                </li>
                <ul class="leftMenu_ul_level2" hidden>
                    <li class="leftMenu_li_level2">心情故事</li>
                </ul>
            </ul>
        </nav>
        <section id="section">主页</section>
        <aside id="aside">登陆</aside>
        <footer id="footer">说明</footer>
    </main>
</body>

</html>